<!DOCTYPE html>
<html>
  <head>
    <!-- 标题及搜索关键字 -->

    <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico" />
    <title>标绘GLTF小模型 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,web-icons,bootstrap,bootstrap-checkbox,layer,toastr,haoutil,turf,mars3d,mars3d-widget"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .infoview div {
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="mars3dContainer" class="mars3d-container"></div>

    <div class="infoview">
      <div>
        模型URL：
        <input id="txtModel" type="text" value="//data.mars3d.cn/gltf/mars/feiji.glb" class="form-control" style="width: 350px" />

        <div class="checkbox checkbox-primary checkbox-inline" title="解决跨域问题">
          <input id="chkProxy" class="styled" type="checkbox" />
          <label for="chkProxy"> 代理 </label>
        </div>
        <input type="button" class="btn btn-primary" title="单击后在地图上点选位置即可" value="标绘" onclick="drawModel()" />
      </div>
      <div>
        <div class="checkbox checkbox-primary checkbox-inline" style="margin-left: 10px">
          <input id="chkHasTerrain" class="styled" type="checkbox" checked />
          <label for="chkHasTerrain"> 地形 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkTestTerrain" class="styled" type="checkbox" />
          <label for="chkTestTerrain"> 深度检测 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline" title="屏蔽拾取地形坐标，避免穿透3dtiles模型">
          <input id="chk_onlyPickModelPosition" class="styled" type="checkbox" />
          <label for="chk_onlyPickModelPosition"> 仅在3dtiles上标绘 </label>
        </div>

        <input id="btnImpFile" type="button" class="btn btn-primary" value="打开" />
        <input id="btnSave" type="button" class="btn btn-primary" value="保存" />
        <input id="input_plot_file" type="file" accept=".json,.geojson" style="display: none" />
        <input type="button" class="btn btn-danger" value="清除" onclick="deleteAll()" />
      </div>
    </div>

    <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
    <script type="text/javascript" src="js/center_terrain_3dtiles.js"></script>

    <script src="./js/common.js"></script>
    <script type="text/javascript">
      'use script' //开发环境建议开启严格模式

      var map
      var graphicLayer

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: {
              y: 30.83351,
              x: 116.354467,
              z: 2742.7,
              heading: 359.3,
              pitch: -51.9,
              roll: 0,
            },
            clock: {
              currentTime: '2021-01-01 22:00:00',
            },
          },
        })

        //创建三维地球场景
        map = new mars3d.Map('mars3dContainer', mapOptions)

        //固定光照，避免gltf模型随时间存在亮度不一致。
        map.fixedLight = true

        this.graphicLayer = new mars3d.layer.GraphicLayer({
          hasEdit: true,
          isAutoEditing: true, //绘制完成后是否自动激活编辑
        })
        map.addLayer(graphicLayer)

        var url = haoutil.system.getRequestByName('url')
        if (url) {
          //url传入模型地址
          $('#txtModel').val(url)
        } else {
          var lastData = haoutil.storage.get('gltf_edit')
          if (lastData) {
            //显示历史数据
            $('#txtModel').val(lastData)
          }
        }

        var globe = map.scene.globe

        $('#chkHasTerrain').change(function () {
          var isStkTerrain = $(this).is(':checked')
          map.hasTerrain = isStkTerrain
        })
        $('#chkTestTerrain').change(function () {
          var val = $(this).is(':checked')
          map.scene.globe.depthTestAgainstTerrain = val
          if (val) {
            toastr.info('深度监测打开后，您将无法看到地下或被地形遮挡的对象。')
          }
        })
        $('#chk_onlyPickModelPosition').change(function () {
          var val = $(this).is(':checked')

          //控制鼠标只取模型上的点，忽略地形上的点的拾取
          map.onlyPickModelPosition = val
        })

        //创建完成，事件监听
        graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
          var graphic = e.graphic
          if (!graphicLayer.isContinued) {
            startEditing(graphic)
          }
        })

        //编辑修改了模型
        graphicLayer.on(
          [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
          function (e) {
            var graphic = e.graphic
            startEditing(graphic)
          }
        )

        //停止编辑修改模型
        graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
          stopEditing()
        })

        $('#btnSave').click(function () {
          var strResult = graphicLayer.toGeoJSON()
          if (strResult == null) {
            layer.msg('当前没有标注任何数据，无需保存！')
            return
          }
          haoutil.file.downloadFile('模型标绘.json', JSON.stringify(strResult))
        })

        $('#input_plot_file').change(function (e) {
          var file = this.files[0]

          var fileName = file.name
          var fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase()
          if (fileType != 'json') {
            layer.msg('文件类型不合法,请选择json格式标注文件！')
            clearSelectFile()
            return
          }

          if (window.FileReader) {
            var reader = new FileReader()
            reader.readAsText(file, 'UTF-8')
            reader.onloadend = function (e) {
              var json = this.result
              graphicLayer.loadGeoJSON(json, {
                clear: true,
                flyTo: true,
              })

              clearSelectFile()
            }
          }
        })

        $('#btnImpFile').click(function () {
          $('#input_plot_file').click()
        })
      }

      function clearSelectFile() {
        if (!window.addEventListener) {
          document.getElementById('input_plot_file').outerHTML += '' //IE
        } else {
          document.getElementById('input_plot_file').value = '' //FF
        }
      }

      function deleteAll() {
        graphicLayer.clear()
      }

      function drawModel() {
        var url = $('#txtModel').val()
        haoutil.storage.add('gltf_edit', url)

        var isProxy = $('#chkProxy').is(':checked')
        if (isProxy) {
          url = '//server.mars3d.cn/proxy/' + url
        }

        graphicLayer.startDraw({
          type: 'model',
          drawShow: true, //绘制时，是否显示模型，可避免在3dtiles上拾取坐标存在问题。
          // editType: 'point', //编辑方式：只调整四周方向和比例
          style: {
            scale: 1,
            url: url,
          },
        })
      }

      //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
      var timeTik

      function startEditing(graphic) {
        clearTimeout(timeTik)

        var plotAttr = mars3d.widget.getClass('widgets/plotAttr/widget.js')
        if (plotAttr && plotAttr.isActivate) {
          plotAttr.startEditing(graphic, graphic.coordinates)
        } else {
          mars3d.widget.activate({
            map: map,
            uri: 'widgets/plotAttr/widget.js',
            name: '属性编辑',
            graphic: graphic,
            lonlats: graphic.coordinates,
          })
        }
      }

      function stopEditing() {
        timeTik = setTimeout(function () {
          mars3d.widget.disable('widgets/plotAttr/widget.js')
        }, 200)
      }
      //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
    </script>
  </body>
</html>
